<template>
  <div class="docs">
    <div class="docs-content">
      <div class="docs-container">
        <div class="docs-hs-contractedheader">常用</div>
        <div class="docs-item-section">
          <div
            class="docs-items"
            v-for="(item, index) in wordInfoList"
            :key="index"
          >
            <div class="docs-templateview">
              <word-card :wordInfo="item"></word-card>
              <!-- <img
                src="https://ssl.gstatic.com/docs/templates/thumbnails/docs-blank-googlecolors.png"
                alt=""
              /> -->
            </div>
            <div class="docs-templateview-caption">
              <div>
                <i
                  class="iconwendang iconfont"
                  :title="item.tempType == 0 ? '合同' : '协议'"
                  :style="{ color: item.tempType == 0 ? '#2a8bf8' : '#ffcd43' }"
                ></i>
                {{ item.tempName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="docs-homescreen">
      <div class="docs-container">
        <div class="docs-homescreen-header">
          <div>所有模板(321)</div>
          <div>
            <el-input
              placeholder="模板编号或模板名称"
              style="width: 200px"
            ></el-input>
            <el-button>搜索</el-button>
          </div>
          <el-select v-model="value" placeholder="按使用频率排列">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-button @click="showList">{{
            listflag ? "网格" : "列表"
          }}</el-button>
        </div>
        <div
          :class="
            listflag
              ? 'docs-homescreen-content-list'
              : 'docs-homescreen-content'
          "
        >
          <div
            v-show="!listflag"
            class="docs-homescreen-itemholder"
            v-for="(item, index) in wordInfoSave"
            :key="index"
          >
            <div class="docs-templateview">
              <word-card :wordInfo="item"></word-card>
              <!-- <img
                src="https://ssl.gstatic.com/docs/templates/thumbnails/docs-blank-googlecolors.png"
                alt=""
              /> -->
            </div>
            <div class="docs-templateview-caption">
              <div>
                <i
                  class="iconwendang iconfont"
                  :title="item.tempType == 0 ? '合同' : '协议'"
                  :style="{ color: item.tempType == 0 ? '#2a8bf8' : '#ffcd43' }"
                ></i>
                {{ item.tempName }}
              </div>
            </div>
          </div>

          <el-table
            v-show="listflag"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column fixed prop="1" label="模板编号"> </el-table-column>
            <el-table-column prop="2" label="模板名称"> </el-table-column>
            <el-table-column prop="3" label="编辑人"> </el-table-column>
            <el-table-column prop="4" label="更新日期"> </el-table-column>
            <el-table-column prop="5" label="绑定业务流数量"> </el-table-column>
            <el-table-column prop="6" label="版本号"> </el-table-column>
            <el-table-column prop="7" label="状态"> </el-table-column>
            <el-table-column label="操作"> </el-table-column>
          </el-table>
        </div>
        <el-pagination
          v-show="!listflag"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:currentPage="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>

        <el-pagination
          v-show="listflag"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import wordCard from "../components/wordCard/wordCard";
export default {
  components: {
    wordCard,
  },
  data() {
    return {
      // 卡片信息
      wordInfoList: [
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1DjldHuXdZrAXCN17B2bx9qXx0VdOgh-LP8ZYHArOYt8_400.png",
        },
        {
          tempType: 1,
          tempName: "征信查询协议",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "李四",
          updataTime: "20201022",
          binding: 2,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1LOuSJGQvDQcEapYaliwIREtHfJkTqNTr43fg2QWfzGM_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1dBDtgig5xrSY8-nNcLrVHcUwkldWZ__THIAHAhDCEAU_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1fyzgIQAUkq_6eIXZ58sncPzlpKYivMDuKKUBO2N6iyI_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1VaI96QrqPIwPxxTqfkji8BQt1eulYU9KKzxW6sXjtEo_400.png",
        },
      ],
      wordInfoSave: [
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1DjldHuXdZrAXCN17B2bx9qXx0VdOgh-LP8ZYHArOYt8_400.png",
        },
        {
          tempType: 1,
          tempName: "征信查询协议",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "李四",
          updataTime: "20201022",
          binding: 2,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1LOuSJGQvDQcEapYaliwIREtHfJkTqNTr43fg2QWfzGM_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1dBDtgig5xrSY8-nNcLrVHcUwkldWZ__THIAHAhDCEAU_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1fyzgIQAUkq_6eIXZ58sncPzlpKYivMDuKKUBO2N6iyI_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1VaI96QrqPIwPxxTqfkji8BQt1eulYU9KKzxW6sXjtEo_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1DjldHuXdZrAXCN17B2bx9qXx0VdOgh-LP8ZYHArOYt8_400.png",
        },
        {
          tempType: 1,
          tempName: "征信查询协议",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "李四",
          updataTime: "20201022",
          binding: 2,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1LOuSJGQvDQcEapYaliwIREtHfJkTqNTr43fg2QWfzGM_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1dBDtgig5xrSY8-nNcLrVHcUwkldWZ__THIAHAhDCEAU_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1fyzgIQAUkq_6eIXZ58sncPzlpKYivMDuKKUBO2N6iyI_400.png",
        },
        {
          tempType: 0,
          tempName: "流水变更回执单",
          tempNum: "MB12368",
          tempVersion: "v1.1",
          editor: "张三",
          updataTime: "20201022",
          binding: 1,
          bgUrl:
            "https://ssl.gstatic.com/docs/templates/thumbnails/1VaI96QrqPIwPxxTqfkji8BQt1eulYU9KKzxW6sXjtEo_400.png",
        },
      ],
      wordInfo: {
        tempNum: "MB12368",
        tempVersion: "v1.1",
        editor: "花蝴蝶222",
        updataTime: "20201022",
        binding: 1,
        bgUrl:
          "https://ssl.gstatic.com/docs/templates/thumbnails/1DjldHuXdZrAXCN17B2bx9qXx0VdOgh-LP8ZYHArOYt8_400.png",
      },
      listflag: false,
      tableData: [
        {
          1: "2016-05-02",
          2: "王小虎",
          3: "上海",
          4: "普陀区",
          5: "上海市普陀区金沙江路 1518 弄",
          6: 200333,
        },
        {
          1: "2016-05-04",
          2: "王小虎",
          3: "上海",
          4: "普陀区",
          5: "上海市普陀区金沙江路 1517 弄",
          6: 200333,
        },
        {
          1: "2016-05-01",
          2: "王小虎",
          3: "上海",
          4: "普陀区",
          5: "上海市普陀区金沙江路 1519 弄",
          6: 200333,
        },
        {
          1: "2016-05-03",
          2: "王小虎",
          3: "上海",
          4: "普陀区",
          5: "上海市普陀区金沙江路 1516 弄",
          6: 200333,
        },
      ],
    };
  },
  methods: {
    showList() {
      this.listflag = !this.listflag;
    },
  },
};
</script>

<style lang="scss" scoped>
.docs {
  &-container {
    width: 1120px;
    margin: 0 auto;
  }

  &-content {
    min-height: 340px;
    background-color: #f1f3f4;
    .docs-hs-contractedheader {
      flex-grow: 1;
      color: #202124;
      font-family: "Google Sans", Roboto, Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      line-height: 64px;
      margin-left: 8px;
      font-size: 20px;
    }
    .docs-item-section {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 1fr;
      column-gap: 30px;
      .docs-templateview {
        border: 1px solid #dadce0;
        box-sizing: border-box;
        width: 180px;
        img {
          display: block;
          width: 100%;
        }
        &:hover {
          // border-color: #679fff;
        }
      }
      .docs-templateview-caption {
        display: flex;
        flex-direction: row;
        margin: 6px 4px;
        min-height: 32px;
        font-weight: 600;
      }
    }
  }

  &-homescreen {
    &-header {
      display: grid;
      grid-template-columns: 4fr 2fr 1.5fr 0.5fr;
      height: 64px;
      place-content: center;
    }
    &-content {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      place-content: center;
      gap: 20px;
      .docs-templateview {
        border: 1px solid #dadce0;
        box-sizing: border-box;
        img {
          display: block;
          width: 100%;
        }
      }
      .docs-templateview-caption {
        margin-top: 8px;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
      }
      .docs-homescreen-itemholder {
      }
    }
  }
}
@import url("//at.alicdn.com/t/font_2298406_21gl1d2mitnj.css");
</style>
